import React, { Component } from 'react'

export default class ClickCounter extends Component {

  state={
    num:0
  }

  //***挂载阶段*************************/
  //--constructor(); 组件被创建出来时执行
  constructor(){
    super() //不要忘记调用父类的构造方法
    console.log("组件在被创建出来了..")
  }
  
  //--组件被挂载出来了
  componentDidMount(){
    console.log("组件被挂载出来了..")
  }

  add = ()=>{
    this.setState({num:this.state.num+1})
  }
  
  //--render 渲染出组件的内容
  render() {
    console.log("组件被渲染了..")
    return (
      <div style={{margin:'20px',padding:'10px',backgroundColor:'#ffc'}}>
        <h3>ClickCounter - 子组件</h3>
        <button onClick={this.add} >
          当前点击次数:{this.state.num}
        </button>
      </div>
    )
  }
  /**更新阶段*prop或state发生变化*************/
  shouldComponentUpdate(newProp,newState){
    console.log("应该让组件更新吗?",newProp,newState)
    return true;
  }
  componentDidUpdate(){
    console.log("组件更新完成..")
  }
  /**卸载阶段*******************************/
  componentWillUnmount(){
    console.log("组件将被卸载了..")
  }
}
